<!DOCTYPE html>
<html>
<head>
	<title>过渡效果</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		#mydiv{
			width: 100px;
			height: 100px;
			background: red;
			/* 支持当前浏览器 */
			-webkit-transition: width 2s;
			transition: width 2s;
		}
		#mydiv:hover{
			width: 400px;
		}
	</style>
</head>
<body>
	<div id="mydiv"></div>

<script type="text/javascript">
	document.getElementById("mydiv").addEventListener("transitioned",function(e){
		this.innerHTML="过度事件触发--过渡已完成"
	})
</script>
</body>
</html>